<template>
  <div id="echart-view"></div>
</template>

<script setup>
import { onMounted } from "vue"
const props = defineProps({})
onMounted(() => {})
import socketStore from "@/store/modules/socket"
import * as echarts from "echarts"
const worldMap = ref({})
import axios from "axios"

axios
  .get("https://app.sz2k.com/world-asia-center.json")
  .then((response) => {
    worldMap.value = response.data
  })
  .catch((error) => {
    console.log(error)
  })

import { geoCoordMap, countryNameZH } from "./data.js"
// // 销售额 按站点统计
// const festival_site_country_stat = computed(() => {
//   console.log("--------------------  festival_site_countsry_tat   --------------------")
//   let data = socketStore().festival_site_country_stat
//   // data = Object.values(data)
//   console.log(data)
//   data = data?.filter((v) => v.country_name)
//   // data.length = 4
//   // income: NUmber(v?.income)?.toFixed(2)
//   data = data.map((v) => [{ ...v, name: v.country_name, income: v?.income }])
//   setTimeout(() => {
//     initEcharts()
//   }, 500)
//   //  [[{ count: 2, country_code: "US", country_name: "美国", income: 3989.14, name: "美国", site_id: "1" }]]
//   return data
// })
const festival_site_country_stat = ref([])

// 平移经度，适配亚洲为中心的地图
const translationLng = ([lng, lat]) => {
  if (lng > -30) {
    lng = lng - 180
  } else {
    lng = lng + 180
  }
  return [lng, lat]
}

// 深圳经纬度
const shenznen = [114.557165, 22.5]
// 获取地图中起点和终点的坐标，以数组形式保存下来
const convertData = function (data) {
  return data.map((item) => {
    const fromCoord = geoCoordMap[item[0].name] || [116.2, 39.55]
    const toCoord = shenznen
    return [
      { coord: translationLng(toCoord) }, // 终点坐标
      { coord: translationLng(fromCoord) }, // 起点坐标
    ]
  })
}

const posHandler = {
  posMap: {},
  reset: function () {
    this.posMap = {}
  },
  getDeltaPos: function (params) {
    var rect = params.rect
    var labelWidth = 122,
      labelHeight = 54
    var gridx = Math.floor(rect.x / labelWidth)
    var gridy = Math.floor(rect.y / labelHeight) + 0.1
    var currCell = [gridx, gridy],
      currPos = []
    var increaseArr = [
      [0, -1],
      [1, -1],
      [1, 0],
      [1, 1],
      [0, 1],
      [-1, -1],
      [-1, 0],
      [-1, -1],
    ]
    // 将显示区域划分成一个个定宽和定高的区域
    // 将标签放在离它最近的区域
    // 如果最近的那格没有，向周围九宫格上面找
    // 找到一个没有放过的,分配给它，然后得出一个偏移量
    var found = false
    // 如果格子已被占，循环查找
    if (this.posMap[currCell[0] + "-" + currCell[1]]) {
      while (!found) {
        for (var i = 0; i < increaseArr.length; i++) {
          currCell[0] = currCell[0] + increaseArr[i][0]
          currCell[1] = currCell[1] + increaseArr[i][1]
          if (!this.posMap[currCell[0] + "-" + currCell[1]]) {
            found = true
            this.posMap[currCell[0] + "-" + currCell[1]] = params.text
            currPos = [currCell[0] * labelWidth, currCell[1] * labelHeight]
            break
          }
        }
        if (found) {
          break
        }
      }
    } else {
      // 如果格子没有被占，就它了
      this.posMap[gridx + "-" + gridy] = params.text
    }
    currPos = [currCell[0] * labelWidth, currCell[1] * labelHeight]
    var deltaPos = {
      dx: currPos[0] - rect.x,
      dy: currPos[1] - rect.y,
    }
    return deltaPos
  },
}

const initEcharts = () => {
  // console.log("worldMap")
  // console.log(worldMap)
  posHandler.reset()
  echarts.registerMap("world", worldMap.value)
  var chartDom = document.getElementById("echart-view")
  // var myChart = echarts.init(chartDom)
  var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 })
  // var myChart = echarts.init(chartDom, null, { renderer: "svg" })
  const lineData = convertData(festival_site_country_stat.value)
  // console.log("lineData")
  // console.log(lineData)
  var option = {
    legend: { show: false },
    geo: {
      map: "world", // 引用的地图名字
      zoom: 1.2,
      nameMap: countryNameZH,
      roam: false, // 禁止缩放平移
      silent: true,
      regions: [
        {
          // 选中的区域
          name: "中国",
          selected: false,
          itemStyle: {
            areaColor: "#ffffff",
          },
          label: { show: false },
        },
      ],

      itemStyle: {
        areaColor: "#ACD3FF",
        borderColor: "#ACD3FF",
      },

      // itemStyle: {
      //   normal: {
      //     borderColor: "rgb(147, 235, 248)",
      //     borderWidth: 0.1,
      //     areaColor: {
      //       x: 150,
      //       y: 150,
      //       x2: 0,
      //       y2: 0,
      //       colorStops: [
      //         {
      //           offset: 0,
      //           color: "#031d5f", // 0% 处的颜色
      //         },
      //         {
      //           offset: 0.45,
      //           color: "#00a1f6",
      //         },
      //         {
      //           offset: 1,
      //           color: "#00a2f7", // 50% 处的颜色
      //         },
      //       ],
      //       global: true, // 缺省为 false
      //     },
      //   },
      // },
      // emphasis: {
      //   label: {
      //     // show: !1,
      //     color: "#fff",
      //   },
      //   areaColor: "rgb(46,229,206)",
      //   //    shadowColor: 'rgb(12,25,50)',
      //   borderWidth: 0.1,
      // },
      // zoom: 1.05,

      // itemStyle: {
      //   normal: {
      //     // areaColor: {
      //     //   type: "radial",
      //     //   x: 0.5,
      //     //   y: 0.5,
      //     //   r: 0.8,
      //     //   colorStops: [
      //     //     {
      //     //       offset: 0,
      //     //       color: "#ACD3FF", // 0% 处的颜色
      //     //     },
      //     //     {
      //     //       offset: 1,
      //     //       color: "#ACD3FF", // 100% 处的颜色
      //     //     },
      //     //   ],
      //     //   globalCoord: true, // 缺省为 false
      //     // },
      //     areaColor: "#ACD3FF",
      //     borderColor: "#ACD3FF",
      //     shadowColor: "rgba(106,203,243,0.6)", // #022764
      //     shadowOffsetX: 3, //阴影偏移量
      //     shadowOffsetY: 6,
      //   },
      //   // emphasis: {
      //   //   areaColor: "#2AB8FF",
      //   //   borderWidth: 0,
      //   //   color: "red",
      //   //   label: {
      //   //     show: false,
      //   //   },
      //   // },
      // },

      // emphasis: { areaColor: "#ffffff", label: { color: "#333", fontSize: 12 } },
    },
    series: [
      // 中国重庆点位
      // {
      //   type: "effectScatter",
      //   coordinateSystem: "geo",
      //   zlevel: 3,
      //   rippleEffect: {
      //     brushType: "stroke",
      //   },
      //   label: {
      //     show: true,
      //     position: "left",
      //     formatter: "{b}",
      //   },
      //   symbolSize: 16,
      //   itemStyle: {
      //     color: "#26c2a6",
      //   },
      //   data: [{ value: translationLng(shenznen) }],
      // },
      // {
      //   // 白色尾迹特效图
      //   type: "lines",
      //   zlevel: 1, // 用于分层，z-index的效果
      //   effect: {
      //     show: true, // 动效是否显示
      //     period: 4, // 特效动画时间
      //     trailLength: 0.7, // 特效尾迹的长度
      //     color: "#fff", // 特效颜色
      //     symbolSize: 3, // 特效大小
      //   },
      //   lineStyle: {
      //     // 正常情况下的线条样式
      //     color: "#337dfe",
      //     width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
      //     curveness: 0.2, // 线条曲度
      //   },
      //   data: lineData, // 特效的起始、终点位置
      // },
      // {
      //   // 连线线效果
      //   type: "lines",
      //   zlevel: 2,
      //   symbolSize: 10,
      //   effect: {
      //     show: true,
      //     period: 4, // 特效动画时间
      //     trailLength: 0, // 特效尾迹的长度
      //     symbolSize: 5, // 特效大小
      //   },
      //   label: {
      //     show: false,
      //   },
      //   lineStyle: {
      //     // normal: {
      //     // color: "#337dfe",
      //     width: 1,
      //     opacity: 0.6,
      //     curveness: 0.2,
      //     // },
      //   },
      //   data: lineData, // 特效的起始、终点位置，一个二维数组
      // },

      {
        // 散点效果
        // type: "scatter",
        type: "effectScatter",
        coordinateSystem: "geo", // 表示使用的坐标系为地理坐标系
        zlevel: 10,
        rippleEffect: {
          brushType: "stroke", // 波纹绘制效果
        },
        labelLinePoints: "567567",
        labelLine: {
          show: true,
          length2: 20,
          // smooth: 0.1,
          // minTurnAngle: 100,
          lineStyle: {
            color: "#3487FF", //颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
            // shadowColor: "red", //阴影颜色
            // shadowOffsetX: 0, //阴影水平方向上的偏移距离。
            // shadowOffsetY: 0, //阴影垂直方向上的偏移距离
            // shadowBlur: 1, //图形阴影的模糊大小。
            type: "solid", //坐标轴线线的类型，solid，dashed，dotted
            width: 2, //坐标轴线线宽
            // opacity: 0.8, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
          },
        },
        effectType: "ripple",
        // showEffectOn: "render",
        // rippleEffect: {
        //   brushType: "stroke",
        // },

        labelLayout: (params) => {
          var dPos = posHandler.getDeltaPos(params)
          return {
            align: "left",
            dx: dPos.dx + 80,
            dy: dPos.dy,
          }
          // return {
          //   // x: params.labelRect.x + 200,
          //   y: params.labelRect.y + 200,
          //   // x: params.labelRect.x,
          //   // y: params.labelRect.y,
          //   // moveOverlap: "shiftY",
          //   moveOverlap: "shiftX",
          // }
        },
        label: {
          // 默认的文本标签显示样式
          show: true,
          position: "right", // 标签显示的位置
          formatter: (v) => {
            return `{a|${v.data.name}}{abg|}\n{b|销售额:}{per|${v.data.income}}\n{b|销量:}{per|${v.data.count}}`
          },
          rich: {
            a: {
              color: "#fff",
              lineHeight: 22,
              align: "center",
            },

            b: {
              color: "#fff",
              align: "left",
              width: 40,
            },
            per: {
              color: "#fff",
              fontFamily: "AlibabaPuHuiTi_2_115_Black",
            },
          },
          textStyle: {
            fontSize: 12,
            padding: [0, 12, 4, 12],
            borderRadius: 5,
            opacity: 0.1,
            backgroundColor: {
              image: "https://xc-goods.oss-cn-shenzhen.aliyuncs.com/20240704/data/Company/%28%E7%9F%A9%E5%BD%A2%29%2B042213406fbbebc027388442c33d94870ea9eeed5.svg",
            },
          },
          // },
        },

        itemStyle: {
          color: "#337dfe",
        },

        data: festival_site_country_stat.value.map((item) => {
          return {
            ...item[0],
            value: translationLng(geoCoordMap[item[0].name] || [116.2, 39.55]),
            symbolSize: 10,
          }
        }),
        symbolSize: (data) => {
          return data[2] * 10
        },
      },
      // {
      //   // 终点
      //   type: "effectScatter",
      //   coordinateSystem: "geo",
      //   zlevel: 3,
      //   rippleEffect: {
      //     brushType: "stroke",
      //   },
      //   label: {
      //     show: true,
      //     position: "left",
      //     formatter: "{b}",
      //   },
      //   symbolSize: 16,
      //   itemStyle: {
      //     color: "#26c2a6",
      //   },
      //   data: [
      //     {
      //       value: translationLng(shenznen),
      //     },
      //   ],
      // },
    ],
  }
  option && myChart.setOption(option)
}

watch(
  () => socketStore().festival_site_country_stat,
  (data) => {
    data = data?.filter((v) => v.country_name)
    data = data.map((v) => [{ ...v, name: v.country_name, income: v?.income }])
    festival_site_country_stat.value = data
    // posHandler.reset()
    setTimeout(() => {
      initEcharts()
    }, 1000)
  },

  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
#echart-view {
  width: 100%;
  height: 100%;
  // 对echarts采用缩放，保证字体大小显示与截图一致
  // transform: scale(0.85);
  // transform-origin: 0 0;
  // width: 117%; //  原100 / 0.85
  // height: 117%; //  原100 / 0.85
}
</style>
